<template>
  <div class="sidebar">
    <div class="sidebar-header">
      <div class="logo">
        <div class="logo-icon">Dx</div>
        <span class="logo-text">Dx Fun Group</span>
      </div>

    </div>

          <el-menu
        :default-active="$route.path"
        class="sidebar-menu"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
        router
      >
      <template v-for="menu in visibleMenus" :key="menu.path">
        <el-menu-item
          v-if="!menu.isExternal"
          :index="menu.path"
          class="menu-item"
        >
          <el-icon><component :is="menu.icon" /></el-icon>
          <template #title>{{ menu.label }}</template>
        </el-menu-item>
        <el-menu-item
          v-else
          class="menu-item"
          @click="menu.onClick"
        >
          <el-icon><component :is="menu.icon" /></el-icon>
          <template #title>{{ menu.label }}</template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { 
  House, 
  User, 
  Trophy, 
  Avatar, 
  DataAnalysis, 
  Setting,
  Grid
} from '@element-plus/icons-vue'
import { useUserStore } from '../stores/user'
import { computed } from 'vue'

const userStore = useUserStore()

const MENU_CONFIG = [
  {
    label: '首页',
    path: '/',
    icon: House,
    roles: ['admin'],
  },
  {
    label: '选手管理',
    path: '/player',
    icon: User,
    roles: ['admin', 'guest'],
  },
  {
    label: '比赛管理',
    path: '/competition',
    icon: Trophy,
    roles: ['admin'],
  },
  {
    label: '实时分组',
    path: '/competition/grouping',
    icon: Grid,
    roles: ['admin', 'guest'],
    isExternal: true,
    onClick: () => window.open('/#/competition/grouping', '_blank'),
  },
  {
    label: '战队管理',
    path: '/teams',
    icon: Avatar,
    roles: ['admin'],
  },
  {
    label: '数据统计',
    path: '/statistics',
    icon: DataAnalysis,
    roles: ['admin'],
  },
  {
    label: '系统设置',
    path: '/settings',
    icon: Setting,
    roles: ['admin'],
  },
]

const userRole = computed(() => {
  if (userStore.hasPermission('admin')) return 'admin'
  return 'guest'
})

const visibleMenus = computed(() =>
  MENU_CONFIG.filter(menu => menu.roles.includes(userRole.value))
)
</script>

<style scoped>
.sidebar {
  width: 240px;
  height: 100vh;
  background-color: #304156;
  transition: width 0.3s;
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
}



.sidebar-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #1f2d3d;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 16px;
  font-family: 'Arial', sans-serif;
}

.logo-text {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap;
}



.sidebar-menu {
  border: none;
  height: calc(100vh - 60px);
}

.menu-item {
  height: 50px;
  line-height: 50px;
}

.menu-item:hover {
  background-color: #263445 !important;
}

.el-menu-item.is-active {
  background-color: #1890ff !important;
  color: #fff !important;
}

.el-menu-item.is-active .el-icon {
  color: #fff !important;
}
</style>
